<template>
  <el-dialog
    ref="redDialog"
    :class="[
      'compo-dialog',
      { 'show-footer': hasFooter, 'no-header': !hasHeader },
    ]"
    v-model="state.visible"
    @close="onClose"
    :show-close="false"
    :modal="false"
    :close-on-click-modal="false"
  >
    <template #header>
      <HeaderWithClose :title="compuTitle" @close="onClickClose" />
    </template>
    <slot></slot>
    <template #footer v-if="hasFooter">
      <div class="dialog-footer">
        <template v-if="$slots.footer">
          <slot name="footer"></slot>
        </template>
        <template v-else>
          <el-button @click="state.visible = false">{{ textCancel }}</el-button>
          <el-button type="primary" @click="onSubmit"> {{ textOk }} </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, toRefs, ref, computed } from "vue";
import HeaderWithClose from "@/components/ui/HeaderWithClose.vue";

const state = reactive({
  visible: false,
  style: {},
  title: "",
  formData: {},
});
const { style, formData } = toRefs(state);

const redDialog = ref();

const emits = defineEmits(["submit", "close", "clickClose"]);

const props = defineProps({
  hasHeader: {
    type: Boolean,
    required: false,
    default: true,
  },
  hasFooter: {
    type: Boolean,
    required: false,
    default: true,
  },
  title: {
    type: String,
    required: false,
    default: "",
  },
  textOk: {
    type: String,
    required: false,
    default: "确定",
  },
  textCancel: {
    type: String,
    required: false,
    default: "取消",
  },
});

const onClickClose = () => {
  state.visible = false;
  emits("close");
  emits("clickClose");
};

const onClose = () => {
  state.visible = false;
  emits("close");
};

const onSubmit = () => {
  emits("submit", {
    showLoading: ".compo-dialog",
  });
};

/**
 * 弹窗  title
 * 1. 优先使用show方法设置的
 * 2. 次级优先使用 title 属性
 */
const compuTitle = computed(() => {
  let ret = state.title || props.title;
  return ret;
});

defineExpose({
  show({ title = "" } = {}) {
    if (title) {
      state.title = title;
    }
    state.visible = true;
  },
  close() {
    onClose();
  },
});
</script>
<style lang="scss">
.compo-dialog {
  --footer-height: 0px;
  padding: 24px;

  border-radius: 8px;
  background: conic-gradient(
    from 90deg at 50% 50%,
    #fafbff 44.00728762149811deg,
    #f7f9ff 65.94390571117401deg,
    #f7faff 90deg,
    #f8fcff 150.71987986564636deg,
    #ecf6ff 215.2921199798584deg,
    #f1f2fc 270.9080243110657deg,
    #eaefff 327.2787022590637deg,
    #f8fcff 360deg,
    #fafbff 25.930346846580505deg
  );
  box-shadow: 0px 12px 24px 0px #33333329;

  &.show-footer {
    --footer-height: 63px;
  }
  &.no-header {
    .el-dialog__header {
      display: none;
    }
  }
  border-radius: 8px;
  .dialog-header {
    color: #323335;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
  .el-dialog__body {
    padding-bottom: 10px;
    max-height: calc(100vh - var(--footer-height) - 300px);
    overflow: auto;
  }
  .el-dialog__footer {
    padding-bottom: 0px;
  }

  .text-light {
    color: #bfc1c5;
  }
}
</style>
